<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">作业情况报告</div>
      <div class="loadAndSearch">
        <div class="loadExcel">
          <div class="button" type="success" @click="uploadFile()">导入</div>
          <div class="button" type="success" @click="getExcelFile()">导出</div>
          <div class="button" type="success" @click="addOne()">新增</div>
          <div class="multiButton" type="success" @click="deleteMulti()">
            删除
          </div>
        </div>
        <div class="search1">
          <el-config-provider :locale="locale">
            <el-date-picker
              v-model="value2"
              style="height: 24px; width: 240px"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="x"
              :default-value="[new Date(), new Date()]"
            />
          </el-config-provider>
          <div class="searchButton" @click="getRenderList()">搜索</div>
        </div>
      </div>
      <div class="table" :style="{ width: tableWidth }">
        <el-table
          empty-text="暂无数据"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
          }"
          :data="tableData"
          @row-dblclick="handleRowDblclick"
          :row-style="{ height: 30 + 'px', lineHeight: '16px' }"
          :cell-style="{ padding: 0 + 'px' }"
          border
          stripe
          style="width: 100%; height: auto"
          max-height="65vh"
          @selection-change="selecttableFunction"
        >
          <el-table-column type="selection" width="35" align="center" />

          <el-table-column
            type="index"
            align="center"
            label="序号"
            min-width="55"
            :index="indexNumber"
          >
          </el-table-column>
          <el-table-column label="计划信息" align="center">
            <el-table-column align="center" label="船名" min-width="200">
              <template #default="scope">
                <div
                  style="
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #67c23a;
                    font-weight: 800;
                  "
                  @click="showSonExcel(scope.row)"
                >
                  {{ scope.row.shipName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="时间"
              min-width="100"
              prop="dateTime"
            />
            <el-table-column
              align="center"
              label="作业地点"
              min-width="100"
              prop="homeworkLocation"
            />
            <el-table-column
              align="center"
              label="加注量"
              min-width="100"
              prop="fillingAmount"
            />
          </el-table-column>
          <el-table-column align="center" label="航行情况" min-width="55"
            ><el-table-column
              align="center"
              label="驾驶员"
              min-width="180"
              prop="driver"
            />
            <el-table-column
              align="center"
              label="航行"
              min-width="100"
              prop="navigate"
            />
            <el-table-column
              align="center"
              label="靠离泊"
              min-width="200"
              prop="berthingOut"
            />
          </el-table-column>
          <el-table-column
            align="center"
            label="冷舱与加注作业情况"
            min-width="55"
          >
            <el-table-column
              align="center"
              label="气轨"
              min-width="100"
              prop="airTrack"
            />
            <el-table-column
              align="center"
              label="接管与密性测试"
              min-width="300"
              prop="takeOverAndTightnessTest"
            />
            <el-table-column
              align="center"
              label="ESD测试"
              min-width="200"
              prop="esd_test"
            />
            <el-table-column
              align="center"
              label="冷管"
              min-width="200"
              prop="coolingTube"
            />
            <el-table-column
              align="center"
              label="冷舱加注过程"
              min-width="300"
              prop="coldCabinRefueling"
            />
            <el-table-column
              align="center"
              label="CTMS"
              min-width="100"
              prop="ctms"
            />
            <el-table-column
              align="center"
              label="拆管"
              min-width="400"
              prop="removePipe"
            />
          </el-table-column>
          <el-table-column
            align="center"
            label="安全情况"
            min-width="400"
            prop="securitySituation"
          />
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>
      <div class="foot">
        <div class="currentPage">当前第{{ page }}/{{ totalPages }}页</div>
        <div
          class="lastPage"
          :style="{ background: color }"
          @click="clickLastPage()"
        >
          上一页
        </div>
        <div
          class="nextPage"
          :style="{ backgroundColor: color1 }"
          @click="clickNextPage()"
        >
          下一页
        </div>
        <div class="currentNumber">共{{ totalNumber }}条</div>
        <div>跳转至:</div>
        <input
          type="text"
          class="skipPage"
          style="width: 50px !important"
          v-model="shipPageNumer"
        />
        <div class="sureSkip" @click="skipPage">确定</div>
      </div>
    </div>
    <div class="dialog" ref="dialog" :style="{ display: show }">
      <div class="loadHomeWorkIneer">
        <div class="changeTop">
          <div
            class="upfileText"
            @click="getExcelFile2()"
            v-show="addOrEdit == '新增' || !jobRecordsFlag"
          >
            附件模版
          </div>
          <div
            class="upfileText"
            @click="upSonFile()"
            v-show="addOrEdit == '新增'"
          >
            上传附件
          </div>
          <div
            class="upfileText"
            @click="upSonFile()"
            v-show="addOrEdit == '编辑'"
          >
            {{ jobRecordsFlag == true ? "修改附件" : "上传附件" }}
          </div>
          <div
            class="delete"
            @click="deleteOneSon(sonId)"
            v-show="jobRecordsFlag"
          >
            删除附件
          </div>
          <div
            class="delete"
            @click="deleteOne(id)"
            v-show="addOrEdit == '编辑'"
          >
            删除
          </div>
          <div class="sure" @click="sureAdd()">确认</div>
          <div class="back" @click="backToIndex()">返回</div>
        </div>
        <div class="dialogText">{{ addOrEdit }}</div>
        <div class="manyInput">
          <div class="iuptInnerContain">
            <div class="inputInner">
              <div class="name">船名:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="船名"
                v-model="shipName"
              />
            </div>
            <div class="inputInner">
              <div class="name">时间:</div>

              <div class="inputContainer">
                <el-config-provider :locale="locale">
                  <el-date-picker
                    v-model="dateTime"
                    type="date"
                    placeholder="时间"
                    format="YYYY/MM/DD"
                    value-format="YYYY/MM/DD"
                  />
                </el-config-provider>
              </div>
            </div>
            <div class="inputInner">
              <div class="name">作业地点:</div>
              <el-select
                style="width: 220px; margin-left: 5px"
                v-model="homeworkLocation"
                :no-data-text="'无数据'"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in placeList"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="inputInner">
              <div class="name">加注量:</div>
              <input
                type="number"
                name=""
                id=""
                placeholder="加注量"
                v-model="fillingAmount"
              />
            </div>
            <div class="inputInner">
              <div class="name">驾驶员:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="驾驶员"
                v-model="driver"
              />
            </div>
            <div class="inputInner">
              <div class="name">航行:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="航行"
                v-model="navigate"
              />
            </div>

            <div class="inputInner">
              <div class="name">靠离泊:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="靠离泊"
                v-model="berthingOut"
              />
            </div>

            <div class="inputInner">
              <div class="name">气轨:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="气轨"
                v-model="airTrack"
              />
            </div>
            <div class="inputInner">
              <div class="name">接管与密性测试:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="接管与密性测试"
                v-model="takeOverAndTightnessTest"
              />
            </div>
            <div class="inputInner">
              <div class="name">ESD测试:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="ESD测试"
                v-model="esd_test"
              />
            </div>
            <div class="inputInner">
              <div class="name">冷管:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="冷管"
                v-model="coolingTube"
              />
            </div>
            <div class="inputInner">
              <div class="name">冷舱加注过程:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="冷舱加注过程"
                v-model="coldCabinRefueling"
              />
            </div>
            <div class="inputInner">
              <div class="name">CTMS:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="CTMS"
                v-model="ctms"
              />
            </div>
            <div class="inputInner">
              <div class="name">拆管:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="拆管"
                v-model="removePipe"
              />
            </div>
            <div class="inputInner">
              <div class="name">安全情况:</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="安全情况"
                v-model="securitySituation"
              />
            </div>
            <div class="inputInner" v-show="addOrEdit == '编辑'">
              <div class="name">是否存在附件:</div>
              <div style="font-size: 15px; text-indent: 5px">
                {{ jobRecordsFlag == true ? "是" : "否" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog1" :style="{ display: show1 }">
      <div class="loadHomeWorkIneer">
        <div class="changeTop">
          <div class="cancel" @click="close()">取消</div>
          <div class="back" @click="getExcelFile1(exportSmallId)">导出附件</div>
        </div>
        <div class="dialogText">{{ shipClickName }}作业时间记录</div>

        <div class="sonTableDiv">
          <div>加注作业编号：{{ sonTable.C2 }}</div>
          <div>作业日期：{{ sonTable.F2 }}</div>
        </div>
        <div class="sonTable">
          <table border="1" cellspacing="0" width="100%">
            <!-- 第一行 -->
            <tbody>
              <tr>
                <!-- <th colspan="2"></th> -->
                <th style="width: 20%; text-align: center">受注船信息</th>
                <th style="width: 20%; text-align: center">船名</th>
                <th style="width: 20%; text-align: center">
                  {{ sonTable.D4 }}
                </th>
                <th style="width: 20%; text-align: center">船型</th>
                <th style="width: 20%; text-align: center">
                  {{ sonTable.F4 }}
                </th>
              </tr>

              <tr>
                <td rowspan="2">加注船信息</td>

                <td class="tdCenter">船名</td>
                <td>{{ sonTable.D5 }}</td>
                <td class="tdCenter">加注站位置</td>
                <td class="tdCenter">
                  {{ sonTable.F5 }}
                </td>
              </tr>
              <tr>
                <td class="tdCenter">作业前停泊位置</td>
                <td>{{ sonTable.D6 }}</td>
                <td class="tdCenter">作业后停泊位置</td>
                <td class="tdCenter">
                  {{ sonTable.F6 }}
                </td>
              </tr>
              <tr>
                <td class="tdCenter">作业地点</td>
                <td class="tdCenter">泊位/锚地</td>
                <td>
                  {{ sonTable.D7 }}
                </td>
                <td class="tdCenter">靠泊方向</td>
                <td class="tdCenter">{{ sonTable.F7 }}</td>
              </tr>
              <tr>
                <td rowspan="2">工作人员情况</td>

                <td class="tdCenter">加注主管</td>
                <td>{{ sonTable.D8 }}</td>
                <td class="tdCenter">船东代表</td>
                <td class="tdCenter">
                  {{ sonTable.F8 }}
                </td>
              </tr>
              <tr>
                <td class="tdCenter">其他人员</td>
                <td colspan="4">{{ sonTable.D9 }}</td>
              </tr>
              <tr>
                <td>加注信息</td>

                <td class="tdCenter">计划加注量</td>
                <td>{{ sonTable.D10 }}</td>
                <td class="tdCenter">实际加注量</td>
                <td class="tdCenter">
                  {{ sonTable.F10 }}
                </td>
              </tr>
              <tr>
                <td>船员工作情况</td>

                <td colspan="4" class="tdLeft">
                  {{ sonTable.C11 }}
                </td>
              </tr>
              <tr>
                <td>受注船作业情况</td>
                <td colspan="4" class="tdLeft">
                  {{ sonTable.C12 }}
                </td>
              </tr>
              <tr>
                <td>加注船设备状况</td>
                <td colspan="4" class="tdLeft">
                  {{ sonTable.C13 }}
                </td>
              </tr>
              <tr>
                <td>靠泊/加注安全情况</td>
                <td colspan="4" class="tdLeft">
                  {{ sonTable.C14 }}
                </td>
              </tr>
              <tr>
                <td>相关建议</td>
                <td colspan="4" class="tdLeft">
                  {{ sonTable.C15 }}
                </td>
              </tr>
            </tbody>
          </table>
          <div class="tableBottom">
            <div style="width: 20%">加注主管签字：</div>
            <div style="width: 40%">船东代表签字：</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog2" :style="{ display: uploadfile }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile"
          @change="getFile($event)"
          accept=".xls,.xlsx"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile()">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import _ from "lodash";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "axios";
import qs from "qs";
export default {
  name: "",
  data() {
    return {
      exportSmallId: null,
      sonId: null,
      shipPageNumer: 1,
      compare: {},
      multi: [],
      token: "",
      locale: zhCn,
      userName: "",
      left: "left1",
      value2: null,
      totalNumber: 0,
      tableData: [],
      showQuit: false,
      menu: "menu1",
      page: 1,
      size: 20,
      show: "none",
      addOrEdit: "新增",
      currentNum: 0,
      placeList: [],
      shipName: "",
      dateTime: "",
      homeworkLocation: "",
      fillingAmount: "",
      driver: "",
      navigate: "",
      berthingOut: "",
      airTrack: "",
      takeOverAndTightnessTest: "",
      esd_test: "",
      coolingTube: "",
      coldCabinRefueling: "",
      ctms: "",
      removePipe: "",
      jobRecordsFlag: null,
      securitySituation: "",
      tableWidth: null,
      serialNumber: "",
      totalPages: null,
      id: "",
      uploadfile: true,
      data: {
        shipName: "",
        dateTime: "",
        homeworkLocation: "",
        fillingAmount: "",
        driver: "",
        navigate: "",
        berthingOut: "",
        airTrack: "",
        takeOverAndTightnessTest: "",
        esd_test: "",
        coolingTube: "",
        coldCabinRefueling: "",
        ctms: "",
        removePipe: "",
        securitySituation: "",
        id: "",
      },

      show1: "none",
      color: "#EBEBEB",
      color1: "#EBEBEB",
      file: null,
      fileName: "",
      jtData: null,
      shipClickName: "",
      sonTable: {},
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},

  methods: {
    async findAllType() {
      await service({
        methods: "get",
        url: "/dict-type/find-all",
      })
        .then((e) => {
          for (let i = 0; i < e.data.length; i++) {
            if (e.data[i].name == "作业地点") {
              this.getPlace(e.data[i].typeKey);
            }
          }
          this.getRenderList();
        })
        .catch((err) => {});
    },
    async getPlace(type) {
      let data = {
        typeKey: type,
      };

      await service({
        methods: "get",
        url: "dict-type/find-dict-item-list",
        params: data,
      })
        .then((e) => {
          this.placeList = e.data;
        })
        .catch((err) => {
          this.$message({
            message: "获取数据失败",
            type: "info",
          });
        });
    },

    indexNumber(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    upSonFile() {
      this.whichType = 2;
      this.uploadfile = "block";
    },
    showSonExcel(row) {
      this.getRenderRecord(row.id);
      this.exportSmallId = row.id;
      this.shipClickName = row.shipName;
    },
    handleRowDblclick(row) {
      this.clickEdit(row.id);
      // this.getRenderRecord1(row.id);
    },

    // 跳转页面
    skipPage() {
      if (this.shipPageNumer <= this.totalPages && this.shipPageNumer > 0) {
        this.page = this.shipPageNumer;
        this.getRenderList();
      } else {
        this.$message({
          type: "warning",
          message: "超出页面数量范围",
        });
      }
    },

    // 批量删除开始========================
    selecttableFunction(row) {
      if (row.length > 0) {
        this.multi = [];
        row.forEach((element) => {
          this.multi.push(element.id);
        });
      } else {
        this.multi = [];
      }
    },
    deleteMulti() {
      // let that = this;
      if (this.multi.length == 0) {
        return this.$message({
          type: "warning",
          message: "请先选中再进行批量删除操作！",
        });
      }
      let data = {
        idList: this.multi + "",
      };

      this.$alert("确定删除选中的信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/navigate-and-homework`,
              params: data,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                if (this.currentNum == this.multi.length && this.page > 1) {
                  this.page--;
                }
                this.getRenderList();
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    //批量删除结束=============================
    formatincludeFlag(row, column) {
      // 获取单元格数据
      let data = row[column.property];

      if (data == 0) {
        return 0;
      } else if (data == 1) {
        return 1;
      } else {
        return "";
      }
    },
    formatDate(row, column) {
      // 获取单元格数据

      let data = row[column.property];

      if (data == null) {
        return null;
      }
      if (data < 60) {
        return data + "分钟";
      } else if (data % 60 == 0) {
        return data / 60 + "小时";
      } else {
        return Math.floor(data / 60) + "小时" + (data % 60) + "分钟";
      }
    },
    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
      // 自定义序号显示，比如增加分页后的偏移量
      // return (this.page - 1) * this.size + index + 1;
    },
    // 导入文件================
    uploadFile() {
      this.uploadfile = "block";
    },
    getFile(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
    },
    submitAddFileSon(id) {
      if (this.file) {
        let data = {
          file: this.file,
          id: id,
        };

        service({
          method: "post",
          url: "/navigate-and-homework/upload-job-records",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            document.getElementsByClassName("addfile")[0].value = "";

            this.getRenderList();
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        document.getElementsByClassName("addfile")[0].value = "";

        this.getRenderList();
      }
      if (this.addOrEdit == "编辑") {
        this.$message({
          message: "修改成功",
          type: "success",
        });
      } else if (this.addOrEdit == "新增") {
        this.$message({
          message: "新增成功",
          type: "success",
        });
      }
      this.file = "";
      this.whichType = "";
      this.fileName = "";
      this.uploadfile = "none";
      this.getRenderList();
      this.clearCanShu();
    },
    submitAddFile() {
      let that = this;
      if (this.whichType == 2) {
        this.uploadfile = "none";
        this.whichType = 1;
        document.getElementsByClassName("addfile")[0].value = "";
        this.$message({
          message: "文件选择成功!",
          type: "success",
        });
        return;
      } else {
        if (this.file) {
          let data = {
            file: this.file,
          };
          service({
            method: "post",
            url: "/navigate-and-homework/upload",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: data,
          })
            .then((res) => {
              document.getElementsByClassName("addfile")[0].value = "";
              this.$message({
                message: "上传成功",
                type: "success",
              });
              this.file = "";
              this.fileName = "";
              this.uploadfile = "none";
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: "info",
              });
            });
        } else {
          this.$message({
            message: "请先选择文件再上传",
            type: "warning",
          });
        }
      }
      setTimeout(function () {
        that.getRenderList();
      }, 500);
    },

    cancelUp() {
      this.file = "";
      this.fileName = "";
      this.uploadfile = "none";
    },
    // 导入文件结束=============
    backToIndex() {
      if (this.addOrEdit == "编辑") {
        let data = {
          shipName: this.shipName,
          dateTime: this.dateTime,
          homeworkLocation: this.homeworkLocation,
          fillingAmount: this.fillingAmount,
          driver: this.driver,
          navigate: this.navigate,
          berthingOut: this.berthingOut,
          airTrack: this.airTrack,
          takeOverAndTightnessTest: this.takeOverAndTightnessTest,
          esd_test: this.esd_test,
          coolingTube: this.coolingTube,
          coldCabinRefueling: this.coldCabinRefueling,
          ctms: this.ctms,
          removePipe: this.removePipe,
          securitySituation: this.securitySituation,
          jobRecordsFlag: this.jobRecordsFlag,
        };
        let equal = _.isEqual(data, JSON.parse(this.compare));

        if (equal) {
          this.close();
        } else {
          this.$confirm("数据信息有变化是否保存再离开？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            // type: "warning",
          })
            .then(() => {
              this.sureAdd();
            })
            .catch(() => {
              this.close();
            });
        }
      } else if (this.addOrEdit == "新增") {
        this.close();
      }
    },
    clickEdit(a) {
      this.addOrEdit = "编辑";
      this.getRenderRecord1(a);
      this.tableData.forEach((item) => {
        if (item.id == a) {
          this.shipName = item.shipName;
          this.dateTime = item.dateTime;
          this.homeworkLocation = item.homeworkLocation;
          this.fillingAmount = item.fillingAmount;
          this.driver = item.driver;
          this.navigate = item.navigate;
          this.berthingOut = item.berthingOut;
          this.airTrack = item.airTrack;
          this.takeOverAndTightnessTest = item.takeOverAndTightnessTest;
          this.esd_test = item.esd_test;
          this.coolingTube = item.coolingTube;
          this.coldCabinRefueling = item.coldCabinRefueling;
          this.ctms = item.ctms;
          this.removePipe = item.removePipe;
          this.securitySituation = item.securitySituation;
          this.id = item.id;
          this.jobRecordsFlag = item.jobRecordsFlag;
          this.compare = JSON.stringify({
            shipName: item.shipName,
            dateTime: item.dateTime,
            homeworkLocation: item.homeworkLocation,
            fillingAmount: item.fillingAmount,
            driver: item.driver,
            navigate: item.navigate,
            berthingOut: item.berthingOut,
            airTrack: item.airTrack,
            takeOverAndTightnessTest: item.takeOverAndTightnessTest,
            esd_test: item.esd_test,
            coolingTube: item.coolingTube,
            coldCabinRefueling: item.coldCabinRefueling,
            ctms: item.ctms,
            removePipe: item.removePipe,
            securitySituation: item.securitySituation,
            jobRecordsFlag: item.jobRecordsFlag,
          });
        }
        this.show = "block";
      });
    },
    // 删除附件
    deleteOneSon(a) {
      // let that = this;
      this.$alert("确定删除这条信息附件信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "GET",
              url: `/navigate-and-homework/delete-job-records/${a}`,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });

                this.getRenderList();
                this.show = "none";
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 删除数据
    deleteOne(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/navigate-and-homework/${a}`,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                if (this.currentNum == 1 && this.page > 1) {
                  this.page--;
                }
                this.getRenderList();
                this.show = "none";
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 弹窗确认按钮
    sureAdd() {
      this.data.shipName = this.shipName;
      this.data.dateTime = this.dateTime;
      this.data.homeworkLocation = this.homeworkLocation;
      this.data.fillingAmount = this.fillingAmount;
      this.data.driver = this.driver;
      this.data.navigate = this.navigate;
      this.data.berthingOut = this.berthingOut;
      this.data.airTrack = this.airTrack;
      this.data.takeOverAndTightnessTest = this.takeOverAndTightnessTest;
      this.data.esd_test = this.esd_test;
      this.data.coolingTube = this.coolingTube;
      this.data.coldCabinRefueling = this.coldCabinRefueling;
      this.data.ctms = this.ctms;
      this.data.removePipe = this.removePipe;
      this.data.securitySituation = this.securitySituation;
      this.data.id = this.id;
      if (this.addOrEdit == "编辑") {
        service({
          method: "put",
          data: this.data,
          url: "/navigate-and-homework",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.submitAddFileSon(this.id);

              this.show = "none";
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      } else {
        service({
          method: "post",
          data: this.data,
          url: "/navigate-and-homework",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.id = r.data.id;

              this.submitAddFileSon(r.data.id);

              this.show = "none";
            }
            this.id = r.data.id;
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
    },

    // 关闭弹窗
    close() {
      this.show = "none";
      this.show1 = "none";
      this.uploadfile = "none";
      this.exportSmallId = null;
      this.clearCanShu();
    },
    // 新增
    addOne() {
      let that = this;
      this.addOrEdit = "新增";
      // this.$refs["dialog"].style.display = show;
      this.show = "block";
    },
    // 导出文件
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();

      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },
    async getExcelFile() {
      let that = this;
      let time = this.getFileName();

      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);
      axios({
        method: "get",
        url: this.$loadFile + "/navigate-and-homework/export",
        responseType: "blob", // 关键：设置响应类型为blob
        data: {
          fileName: "装载作业",
        },
        headers: {
          token: that.token,
        },
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          // 创建一个隐藏的<a>标签，并设置其href属性为上面创建的URL
          const link = document.createElement("a");
          link.href = url;

          link.download = "作业情况报告-" + time + ".xls"; // 替

          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({
            message: "文件下载失败",
            type: "info",
          });
        });
    },
    async getExcelFile1(id) {
      let that = this;
      let time = this.getFileName();

      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);
      axios({
        method: "get",
        url: this.$loadFile + "/navigate-and-homework/export-job-records",
        responseType: "blob", // 关键：设置响应类型为blob

        headers: {
          token: that.token,
        },
        params: {
          id: id,
        },
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          // 创建一个隐藏的<a>标签，并设置其href属性为上面创建的URL
          const link = document.createElement("a");
          link.href = url;

          link.download = this.shipClickName + "-" + time + ".xls"; // 替

          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({
            message: "文件下载失败",
            type: "info",
          });
        });
    },
    async getExcelFile2() {
      let that = this;

      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);
      axios({
        method: "get",
        url: this.$loadFile + "/navigate-and-homework/export-job-records",
        responseType: "blob", // 关键：设置响应类型为blob

        headers: {
          token: that.token,
        },
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          // 创建一个隐藏的<a>标签，并设置其href属性为上面创建的URL
          const link = document.createElement("a");
          link.href = url;

          link.download = "附件模版" + ".xls"; // 替

          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({
            message: "文件下载失败",
            type: "info",
          });
        });
    },
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },

    // 获取列表数据
    async getRenderList() {
      let data = {};
      if (this.value2) {
        data = {
          page: this.page,
          size: this.size,
          startDate: this.value2[0],
          endDate: this.value2[1],
          rangeStr: "dateTime",
        };
      } else {
        data = {
          page: this.page,
          size: this.size,
        };
      }
      await service({
        methods: "get",
        url: "/navigate-and-homework/find-one-page",
        params: data,
      })
        .then((e) => {
          this.totalNumber = e.data.totalElements;
          this.totalPages = e.data.totalPages;
          if (this.totalPages == 0) {
            this.totalPages = 1;
          }

          if (this.page < this.totalPages) {
            this.color1 = "#268FDE";
          } else {
            this.color1 = "#EBEBEB";
          }
          if (this.page == 1) {
            this.color = "#EBEBEB";
          } else {
            this.color = "#268FDE";
          }
          this.tableData = e.data.content;
          this.currentNum = e.data.numberOfElements;
        })
        .catch((err) => {});
    },
    async getRenderRecord(id) {
      await service({
        methods: "get",
        url: "/navigate-and-homework/get-job-records",
        params: { id: id },
      })
        .then((e) => {
          if (!e.data) {
            return this.$message({
              message: "无附件内容",
              type: "warning",
            });
          } else {
            this.show1 = "block";
            this.sonId = e.data.id;

            this.sonTable = JSON.parse(e.data.jsonValue);
          }
        })
        .catch((err) => {});
    },
    // 进获取当前sonId
    async getRenderRecord1(id) {
      await service({
        methods: "get",
        url: "/navigate-and-homework/get-job-records",
        params: { id: id },
      })
        .then((e) => {
          if (e.data) {
            this.sonId = e.data.id;
          } else {
            this.sonId = null;
          }
        })
        .catch((err) => {});
    },
    clearCanShu() {
      this.shipName = "";
      this.dateTime = "";
      this.homeworkLocation = "";
      this.fillingAmount = "";
      this.driver = "";
      this.navigate = "";
      this.berthingOut = "";
      this.airTrack = "";
      this.takeOverAndTightnessTest = "";
      this.esd_test = "";
      this.coolingTube = "";
      this.coldCabinRefueling = "";
      this.ctms = "";
      this.removePipe = "";
      this.jobRecordsFlag = "";
      this.securitySituation = "";
      this.id = "";
      this.data = {
        shipName: "",
        dateTime: "",
        homeworkLocation: "",
        fillingAmount: "",
        driver: "",
        navigate: "",
        berthingOut: "",
        airTrack: "",
        takeOverAndTightnessTest: "",
        esd_test: "",
        coolingTube: "",
        coldCabinRefueling: "",
        ctms: "",
        removePipe: "",
        securitySituation: "",
        id: "",
      };
    },

    clickLastPage() {
      if (this.page > 1) {
        this.page--;
        if (this.page == 1) {
          this.color = "#EBEBEB";
        } else {
          this.color = "#268FDE";
        }
        if (this.page < this.totalPages) {
          this.color1 = "#268FDE";
        }
        this.getRenderList();
      } else {
        this.color = "#EBEBEB";
      }
    },
    clickNextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.color = "#268FDE";
        if (this.page == this.totalPages) {
          this.color1 = "#EBEBEB";
        } else {
          this.color1 = "#268FDE";
        }
      }
      this.getRenderList();
    },
    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }

        // this.changeLeft = "child1";
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作

      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
    $route(to, from) {
      // 在这里根据参数的变化执行刷新页面的逻辑
      if (to.name == from.name) {
        this.close();
      }
    },
  },

  created() {
    this.sendMessage();
    this.getRenderList();
    this.findAllType();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    this.getRenderList();

    // this.sendMessage();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.manyInput {
  width: 780px;
  height: 80vh;
  overflow: auto;
  // background: red;
  margin: auto;

  // overflow: scroll;
  .iuptInnerContain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .inputInner {
      width: 375px;
      min-height: 35px;
      // background: blue;
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      color: #365488;
      .name {
        width: 150px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }
      .name1 {
        width: 210px;
        margin-left: 10px;
        height: 3vh;
        line-height: 3vh;
        text-indent: 1em;
        outline: none;
        font-size: 15px;
        border: none;
        // background: #ebebeb;
        color: #365488;
      }
      .inputContainer {
        width: 210px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 220px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        // padding: 5px;
        color: #365488;
        text-align: left;
        // border: 1px solid #365488;
        border-radius: 4px;
        // background-color: #fff;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
    }
    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
}
.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;
    .loadTop {
      width: 50%;
      line-height: 4vh;
      font-size: 20px;
      color: #777676;
      // text-indent: 10px;
      margin-left: 10px;

      font-weight: 800;
    }
    .loadAndSearch {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .search1 {
        display: flex;
        align-items: center;
        justify-content: center;
        // margin-top: 10px;
        margin-right: 10px;

        .searchButton {
          width: 64px;
          margin-top: -2px;
          background: #0470c1;
          font-size: 15px;
          height: 23px;
          text-align: center;
          line-height: 23px;
          // color: #777676;
        }
      }
    }

    .sonTable,
    .sonTableDiv {
      width: 80%;

      // background: red;
      margin: auto;
      overflow: auto;
      font-size: 15px;
      color: black;
    }
    .sonTableDiv {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 5px;
    }
    .sonTable {
      // background: red;
      height: 80vh;
    }
  }
  // background: blue;
  tr {
    text-align: center;
  }

  .tdLeft {
    text-align: left;
    padding: 0 5px;
  }
  .tdCenter {
    text-align: center;
    padding: 0 5px;
  }
}
.tableBottom {
  width: 100%;
  height: 30px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.table {
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}

.rigth {
  flex-grow: 1;
  height: 100vh;
  // background: blue;
  .rightTop {
    width: 100%;
    height: 7vh;
    display: flex;
    // background: #3359c7;
    align-items: center;
    justify-content: space-between;
    .topLeft {
      width: 460px;
      display: flex;
      align-items: center;
      height: 100%;
      .changeButton {
        margin-left: 10px;
        width: 40px;
        height: 2.8vh;
        color: #163fb1;
      }
      .NavChangeName {
        // margin-left: 10px;
        font-size: 20px;
        color: #365488;
        width: 140px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
    }
    .topRight {
      width: 250px;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      // background: red;
      .bell,
      .share {
        color: #3359c7;
        position: relative;
        display: flex;
        align-items: center;
        .messageCircle {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: red;
          color: white;
          position: absolute;
          top: -2.4vh;
          left: 0vw;
          transform: scale(0.5);
        }
      }
      .share,
      .avater {
        margin-left: 10px;
      }
      .avater {
        width: 150px;
        height: 100%;
        // background: red;
        display: flex;
        align-items: center;
        .pic {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .userName {
          margin-left: 10px;
          width: 90px;
          height: 100%;
          position: relative;
          display: flex;
          align-items: center;
          color: #3359c7;
          font-size: 15px;
        }
      }
      .quit {
        width: 150px;
        text-align: center;
        line-height: 40px;
        background: #3359c7;
        position: absolute;
        z-index: 100;
        color: white;
        font-size: 20px;
        right: 0px;
        top: 7vh;
      }
    }
  }
  .rightInner {
    width: 100%;
    height: 93%;
    background: #ebebeb;
  }
}

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      margin-top: 10px !important;
    }
  }
  .closeAndSrue {
    width: 150px;
  }
}
</style>
